<script setup>
import {onMounted, onUnmounted} from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

let map = null

const dataJson = require("@/assets/data.json")

function addMarker() {

  for (let i of dataJson) {
    let data = i.powerSystemResource_location
    if (data.search('POINT') != -1) {
      let lngLat = data.replace('POINT(', "").replace(')', "").split(" ");
      let lngLatArr = lngLat.map(Number)
      let marker = new AMap.Marker({
        position: new AMap.LngLat(lngLatArr[0], lngLatArr[1]),
        title: i.naming_name
      });
      var circleMarker = new AMap.CircleMarker({
        center: lngLatArr,
        radius: 6,
        strokeColor: 'white',
        strokeWeight: 2,
        strokeOpacity: 1,
        fillColor: 'rgb(255,0,0)',
        fillOpacity: 1,
        zIndex: 10,
        bubble: true,
        cursor: 'pointer',
        clickable: true
      })
      // circleMarker.setMap(map)
      // map.add(marker)
    }
    if (data.search('LINESTRING') != -1) {
      let linePointArr = data.replace('LINESTRING(', "").replace(')', "").split(",")
      let dataArr = linePointArr.map((i) => {
        return i.split(" ").map(Number)
      });
      var polyline = new AMap.Polyline({
        path: dataArr,
        isOutline: true,
        borderWeight: 2,
        strokeColor: "#003fff",
        strokeOpacity: 1,
        strokeWeight: 3,
        strokeStyle: "solid",
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
      })
      polyline.setMap(map)
    }
  }


}

onMounted(() => {

  AMapLoader.load({
    key: '86ab73c3cc0d522232e825dbc1dde10c', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0',
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '2D', // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: [113.9293032, 23.780649], // 初始化地图中心点位置
      })

      var path = [
        new AMap.LngLat(116.368904, 39.913423),
        new AMap.LngLat(116.382122, 39.901176),
        new AMap.LngLat(116.387271, 39.912501),
        new AMap.LngLat(116.398258, 39.904600)
      ]
      var polyline = new AMap.Polyline({
        path: path,
        borderWeight: 1, // 线条宽度，默认为 1
        strokeWidth: 6,
        strokeColor: 'blue', // 线条颜色
        lineJoin: 'round' // 折线拐点连接处样式
      })

      polyline.on('click', (e) => {
        polyline.setOptions({
          outlineColor: 'red',
          strokeColor: 'red',
          strokeOpacity: 1,
          strokeWeight: 8,
          borderWeight: 3,
          zIndex: 25
        })
      })

      map.add(polyline)
      addMarker()
    })
    .catch((e) => {
      console.log(e)
    })
})

onUnmounted(() => {
  map?.destroy()
})
</script>

<template>
  <div id="container"></div>
  <div class="scheme-box">
    <a-card size="small" bordered class="scheme-card" head-style="color: #fff;font-weight: 600;background: #1890ff;">
      <template #title>
        <span class="title">仿真方案</span>
      </template>
      <template #extra><span style="cursor:pointer;">添加</span></template>
      <div class="scheme-list-box">
        <div class="simu-scheme">
          <div class="scheme-check">
            <a-checkbox v-model:checked="checked">方案A</a-checkbox>
          </div>
          <div>
            <a-button type="link" primary>编辑</a-button>
          </div>
          <div>
            <a-button type="link" danger>删除</a-button>
          </div>
        </div>
        <div class="simu-scheme">
          <div class="scheme-check">
            <a-checkbox v-model:checked="checked">方案B</a-checkbox>
          </div>
          <div>
            <a-button type="link" primary>编辑</a-button>
          </div>
          <div>
            <a-button type="link" danger>删除</a-button>
          </div>
        </div>
        <div class="simu-scheme">
          <div class="scheme-check">
            <a-checkbox v-model:checked="checked">方案C</a-checkbox>
          </div>
          <div>
            <a-button type="link" primary>编辑</a-button>
          </div>
          <div>
            <a-button type="link" danger>删除</a-button>
          </div>
        </div>
        <div class="simu-scheme">
          <div class="scheme-check">
            <a-checkbox v-model:checked="checked">方案D</a-checkbox>
          </div>
          <div>
            <a-button type="link" primary>编辑</a-button>
          </div>
          <div>
            <a-button type="link" danger>删除</a-button>
          </div>
        </div>
        <div class="simu-scheme">
          <div class="scheme-check">
            <a-checkbox v-model:checked="checked">方案E</a-checkbox>
          </div>
          <div>
            <a-button type="link" primary>编辑</a-button>
          </div>
          <div>
            <a-button type="link" danger>删除</a-button>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
.scheme-box {
  width: 350px;
  border-radius: 10px;
  position: absolute;
  top: 15%;
  left: 2%;

  .scheme-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
  }

  .scheme-list-box {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;

    .simu-scheme {
      display: grid;
      grid-template-columns: 60% 20% 20%;
      width: 100%;
      font-weight: 500;
      padding: 3px 0;

      .scheme-check {
        display: flex;
        align-items: center;
      }
    }
  }

  .title {
  }
}

#container {
  width: 100%;
  height: 800px;
}
</style>
